<template>
  <div>
    <div class="ding">
      <h2>姓名:{{ name }}</h2>
      <br />
      <h2>年龄:{{ address }}</h2>
      <br />
    </div>
    <br />
    <div class="ning">
      <h2>金钱:{{ money2 }}</h2>
      <h2>喜欢的明星:{{ person.name }}</h2>
      <h2>喜欢的明星身高:{{ person.height }}</h2>
      <button @click="money2++">点击money加1</button>
      <!-- 这是一个友好的Bug -->
      <button @click="person.name += '~'">点击修改姓名</button>
    </div>
  </div>
</template>

<script>
export default {
  //
  name: "Props",
  // props 需要先接收 才能调用  注意:不能修改
  // 第一种接收的方式
  // props:['money','person'],
  // 第二种接受的方式  (是严格模式)
  // props:{
  //     money:Number, //可以进行类型的限制
  //     person:Object
  // },
  // 第三种声明接受方式
  props: {
    money: {
      type: Number,
      default: 100,
      required: true,
    },
    person: {
      type: Object,
      // 为了不影响数据的使用  其他人使用时不会对原本的数据进行修改
      default() {
        return { name: "刘翔", height: "182" };
      },
      // required:true
    },
  },
  data() {
    return {
      name: "丁妹妹",
      address: "河北承德",
      money2: this.money,
    };
  },
};
</script>

<style>
.ding {
  background-color: rgb(113, 221, 113);
  padding: 30px;
}
.ning {
  background-color: rgb(129, 216, 243);
  padding: 30px;
}
</style>